var dom = document.getElementById('weather-left1');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});

//var myChart = echarts.init(dom, '',
//    { width: document.getElementById('weather-left1').offsetWidth,
//      height:document.getElementById('weather-left1').offsetHeight
//});
var weatherName = ["晴","小雨","阴","暴雨","多云","大雨","小雨"];
var date=["01.25","01.26","01.27","01.28","01.29","01.30","01.31"];
var week=["周一","周二","周三","周四","周五","周六","周日"];
var high_temperature=["16.3","16.2","17.6","14.2","17.6","15.7","14.3"];
var low_temperature=["13.4","12.8","13.5","12.5","12.4","13.2","13"];
var option = {
    title: {
        text: '近七天的天气情况',
        //subtext: '',
        textStyle: {
			    fontSize:22,
			    fontWeight: 'bold',
		},
        left: 'center',
        top:'5%'
    },
    grid: {
      show: true,
      backgroundColor: 'transparent',
      opacity: 0.3,
      borderWidth: '0',
      //top:'5%',
      top: '70%',//200
      bottom: '0%',
//      x:50,
//      y:150,
//      x2:50,
//      y2:150,
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      show: false
    },
    dataZoom: [
      {
        type: 'inside',
        show: true,
        xAxisIndex: [0, 1, 2],
        start: 0,
        //end: 60,
        filterMode: 'empty'
      }
    ],
    xAxis: [
      // 日期
      {
        type: 'category',
        boundaryGap: false,
        position: 'top',
        offset: 180,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}}'
          ].join('\n'),
          rich: {
            a: {
              // color: 'white',
              fontSize: 19
            }
          }
        },
        nameTextStyle: {

        },
        data: date
      },
      // 星期
      {
        type: 'category',
        boundaryGap: false,
        position: 'top',
        offset: 130,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}}'
          ].join('\n'),
          rich: {
            a: {
              // color: 'white',
              fontSize: 17
            }
          }
        },
        nameTextStyle: {
          fontWeight: 'bold',
          fontSize: 20
        },
        data: week
      },
      // 天气图标
      {
        type: 'category',
        boundaryGap: false,
        position: 'top',
        offset: 30,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: function(value, index) {
            //return '{' + index + '| }\n{b|' + value + '}'
            return '{' + value + '| }\n{b|' + weatherName[value] + '}'
          },
          rich: {
            0: {
              backgroundColor: {
                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
                image: `https://d.scggqx.com/forecast/img/${weatherName[0]}.png`
              },
              height: 50,
              width: 50
            },
            1: {
              backgroundColor: {
                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
                image: `https://d.scggqx.com/forecast/img/${weatherName[1]}.png`
              },
              height: 50,
              width: 50
            },
            2: {
              backgroundColor: {
                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
                image: `https://d.scggqx.com/forecast/img/${weatherName[2]}.png`
              },
              height: 50,
              width: 50
            },
            3: {
              backgroundColor: {
                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
                image: `https://d.scggqx.com/forecast/img/${weatherName[3]}.png`
              },
              height: 50,
              width: 50
            },
            4: {
              backgroundColor: {
                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
                image: `https://d.scggqx.com/forecast/img/${weatherName[4]}.png`
              },
              height: 50,
              width: 50
            },
            5: {
              backgroundColor: {
                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
                image: `https://d.scggqx.com/forecast/img/${weatherName[5]}.png`
              },
              height: 50,
              width: 50
            },
            6: {
              backgroundColor: {
                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
                image: `https://d.scggqx.com/forecast/img/${weatherName[6]}.png`
              },
              height: 50,
              width: 50
            },
            b: {
              // color: 'white',
              fontSize: 15,
              lineHeight: 30,
              height: 20
            }
          }
        },
        nameTextStyle: {
          fontWeight: 'bold',
          fontSize: 20
        },
        // data: this.weatherdata.weather
        //data: ["小雨","小雨","阴","小雨","多云","小雨","小雨"]
        data: [0,1,2,3,4,5,6]
      }
    ],
    yAxis: {
      type: 'value',
      show: false,
      axisLabel: {
        formatter: '{value} °C',
        color: 'white'
      }
    },
    series: [
      {
        name: '最高气温',
        type: 'line',
        data: high_temperature,
        symbol: 'emptyCircle',
        symbolSize: 12,
        showSymbol: true,
        smooth: true,
        itemStyle: {
          normal: {
            color: '#C95843'
          }
        },
        label: {
          show: true,
          position: 'top',
          // color: 'white',
          formatter: '{c} °C'
        },
        lineStyle: {
          width: 1,
          // color: 'white'
        },
        areaStyle: {
          opacity: 1,
          color: 'transparent'
        }
      },
      {
        name: '最低气温',
        type: 'line',
        data: low_temperature,
        symbol: 'emptyCircle',
        symbolSize: 12,
        showSymbol: true,
        smooth: true,
        itemStyle: {
          normal: {
            color: 'blue'
          }
        },
        label: {
          show: true,
          position: 'bottom',
          // color: 'white',
          formatter: '{c} °C'
        },
        lineStyle: {
          width: 1,
          // color: 'white'
        },
        areaStyle: {
          opacity: 1,
          color: 'transparent'
        }
      }
    ]
}

myChart.setOption(option);
//窗口变化更改Chart大小
window.addEventListener('resize', myChart.resize);